﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <script src="Scripts/vue.min.js"></script>
</head>
<body>
    <fieldset>
        <legend>身份验证</legend>
        <form>
            <label for="UserName">用户名:</label><input type="text" name="username" id="userName" value="admin" />
            <br />
            <br />
            <label for="Password">密码:</label><input type="password" name="password" id="password" value="123" />
            <br />
            <br />
        </form>
        <button id="login">登录</button>
    </fieldset>
    <br />

    <fieldset>
        <legend>调用接口</legend>
        <button id="invokeRiver">调用河道站接口</button>
        <button id="invokeRes">调用水库站接口</button>
        <button id="invokeRain">调用雨量站接口</button>
    </fieldset>
    <fieldset>
        <legend>返回结果</legend>
        <textarea style="width:100%;height:200px"  id="txtresult"></textarea>
        <table style="width:100%">

        </table>
    </fieldset>
    <script>
        $(function () {
            //调用api站点的登录接口,接口在登录成功后返回一个token。
            $("#login").on("click", function () {
                $.ajax({
                    url: "/lnfloodapi.ashx?action=login",
                    data: $("form").serialize(),
                    method: "post",
                    dataType:"json",
                    success: function (data) {
                        if (data.success) {
                            //为简单起见，将token保存在全局变量中。
                            window.token = data.data;
                            alert("登录成功");
                        } else {
                            alert("登录失败:" + data.msg);
                        }
                    }
                });
            });

            //调用河道站
            $("#invokeRiver").on("click", function () {
                $.ajax({
                    url: "/lnfloodapi.ashx?action=getriver",
                    method: "get",
                    //dataType: "json",
                    headers: { "auth": window.token },//通过请求头来发送token，放弃了通过cookie的发送方式
                    success: function (data) {
                        $('#txtresult').text(data);
                    }
                    
                });
            });

            //调用水库站
            $("#invokeRes").on("click", function () {
                $.ajax({
                    url: "/lnfloodapi.ashx?action=getreservoir",
                    method: "get",
                    //dataType: "json",
                    headers: { "auth": window.token },//通过请求头来发送token，放弃了通过cookie的发送方式
                    success: function (data) {
                        $('#txtresult').text(data);
                    }

                });
            });

            //调用雨量站
            $("#invokeRain").on("click", function () {
                $.ajax({
                    url: "/lnfloodapi.ashx?action=getdayrain",
                    method: "get",
                    //dataType: "json",
                    headers: { "auth": window.token },//通过请求头来发送token，放弃了通过cookie的发送方式
                    success: function (data) {
                        $('#txtresult').text(data);
                    }

                });
            });
        });
    </script>
</body>
</html>
